<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议室预定系统 - 管理员界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
        }
        
        .layout {
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            background-color: #001529;
            color: white;
            padding: 20px 0;
        }
        
        .logo {
            padding: 0 20px 30px;
            border-bottom: 1px solid #ffffff20;
            margin-bottom: 20px;
        }
        
        .logo h2 {
            color: #1890ff;
            font-size: 20px;
        }
        
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s;
            color: rgba(255,255,255,0.65);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .menu-item:hover,
        .menu-item.active {
            background-color: #1890ff;
            color: white;
        }
        
        .main-content {
            flex: 1;
            padding: 20px;
        }
        
        .header {
            background: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header h1 {
            font-size: 24px;
            color: #262626;
        }
        
        .user-info {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .card {
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #262626;
            border-bottom: 2px solid #1890ff;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: #1890ff;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #40a9ff;
        }
        
        .btn-success {
            background-color: #52c41a;
            color: white;
        }
        
        .btn-success:hover {
            background-color: #73d13d;
        }
        
        .btn-danger {
            background-color: #ff4d4f;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #ff7875;
        }
        
        .btn-default {
            background-color: white;
            color: #262626;
            border: 1px solid #d9d9d9;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        
        th {
            background-color: #fafafa;
            font-weight: 600;
            color: #262626;
        }
        
        tr:hover {
            background-color: #fafafa;
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        
        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: #f6ffed;
            color: #52c41a;
        }
        
        .badge-warning {
            background-color: #fff7e6;
            color: #fa8c16;
        }
        
        .badge-danger {
            background-color: #fff2f0;
            color: #ff4d4f;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-weight: 500;
            margin-bottom: 8px;
            color: #262626;
        }
        
        .form-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .settings-section {
            padding: 20px;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .settings-section h3 {
            margin-bottom: 16px;
            color: #262626;
            font-size: 16px;
        }
        
        .alert {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .alert-success {
            background-color: #f6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }
        
        .alert-error {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
            color: #ff4d4f;
        }
        
        .hidden {
            display: none;
        }
        
        /* 编辑会议室弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 8px;
            max-width: 800px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 18px;
            color: #262626;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #8c8c8c;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }
        
        .modal-close:hover {
            background-color: #f5f5f5;
            color: #262626;
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        .schedule-table {
            margin-top: 20px;
        }
        
        .schedule-table th {
            background-color: #fafafa;
        }
        
        .schedule-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
        }
        
        .schedule-day {
            min-width: 80px;
            font-weight: 500;
        }
        
        .schedule-time {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .time-input {
            width: 100px;
            padding: 6px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
        }
        
        .checkbox-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .tab-container {
            margin-bottom: 20px;
        }
        
        .tabs {
            display: flex;
            gap: 8px;
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border: none;
            background: none;
            color: #595959;
            font-size: 14px;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }
        
        .tab.active {
            color: #1890ff;
            border-bottom-color: #1890ff;
        }
        
        .tab:hover {
            color: #40a9ff;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
    </style>
    <script>
        let currentView = 'rooms';
        
        function switchView(view) {
            currentView = view;
            
            // Hide all sections
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.add('hidden');
            });
            
            // Show selected section
            const selectedSection = document.getElementById(view + '-section');
            if (selectedSection) {
                selectedSection.classList.remove('hidden');
            }
            
            // Update menu items
            document.querySelectorAll('.menu-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // Update header title
            const titles = {
                'rooms': '会议室管理',
                'bookings': '所有预定',
                'statistics': '统计数据',
                'settings': '系统设置'
            };
            document.getElementById('header-title').textContent = titles[view];
        }
        
        function updateAdminPassword(event) {
            event.preventDefault();
            
            const oldPassword = document.getElementById('oldPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            const errorDiv = document.getElementById('passwordError');
            const successDiv = document.getElementById('passwordSuccess');
            
            errorDiv.classList.add('hidden');
            successDiv.classList.add('hidden');
            
            // Validate passwords
            if (newPassword !== confirmPassword) {
                errorDiv.textContent = '新密码和确认密码不一致';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            if (newPassword.length < 6) {
                errorDiv.textContent = '新密码长度至少为6位';
                errorDiv.classList.remove('hidden');
                return;
            }
            
            // 实际应用中这里应该调用后端API
            console.log('更新管理员密码:', { oldPassword, newPassword });
            
            // Show success message
            successDiv.textContent = '管理员密码更新成功！';
            successDiv.classList.remove('hidden');
            
            // Reset form
            document.getElementById('passwordForm').reset();
            
            // Hide success message after 3 seconds
            setTimeout(() => {
                successDiv.classList.add('hidden');
            }, 3000);
        }
        
        // 打开编辑会议室弹窗
        function openEditRoomModal(roomId, roomName) {
            const modal = document.getElementById('editRoomModal');
            modal.classList.add('active');
            
            // 设置当前编辑的会议室
            document.getElementById('editRoomId').value = roomId;
            document.getElementById('modalRoomTitle').textContent = `编辑会议室 - ${roomName}`;
            
            // 模拟加载会议室数据
            loadRoomData(roomId, roomName);
            
            // 默认显示基本信息标签
            switchEditTab('basic');
        }
        
        // 关闭编辑会议室弹窗
        function closeEditRoomModal() {
            const modal = document.getElementById('editRoomModal');
            modal.classList.remove('active');
        }
        
        // 切换编辑标签
        function switchEditTab(tab) {
            // 更新标签样式
            document.querySelectorAll('.edit-tab').forEach(t => {
                t.classList.remove('active');
            });
            document.querySelector(`[data-tab="${tab}"]`).classList.add('active');
            
            // 显示对应内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(`${tab}-tab`).classList.add('active');
        }
        
        // 加载会议室数据
        function loadRoomData(roomId, roomName) {
            // 模拟加载会议室基本信息
            const roomData = {
                '1': { name: '会议室A', capacity: 10, location: 'A栋3楼', facilities: '投影仪、白板、视频会议' },
                '2': { name: '会议室B', capacity: 20, location: 'A栋3楼', facilities: '投影仪、白板、音响系统' },
                '3': { name: '301会议室', capacity: 6, location: 'B栋3楼', facilities: '白板、电视屏幕' },
                '4': { name: '董事会议室', capacity: 15, location: 'A栋5楼', facilities: '投影仪、视频会议、高级座椅' }
            };
            
            const room = roomData[roomId];
            if (room) {
                document.getElementById('roomName').value = room.name;
                document.getElementById('roomCapacity').value = room.capacity;
                document.getElementById('roomLocation').value = room.location;
                document.getElementById('roomFacilities').value = room.facilities;
            }
            
            // 模拟加载会议室时间表
            loadRoomScheduleData(roomId);
        }
        
        // 加载会议室时间表数据
        function loadRoomScheduleData(roomId) {
            // 实际应用中这里应该调用API：GET /api/schedules/room/{room_id}
            console.log(`加载会议室 ${roomId} 的时间表`);
            
            // 模拟数据：默认周一至周五 08:00-18:00
            const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
            days.forEach((day, index) => {
                const isWeekday = index < 5;
                document.getElementById(`${day}Enabled`).checked = isWeekday;
                document.getElementById(`${day}Open`).value = isWeekday ? '08:00' : '00:00';
                document.getElementById(`${day}Close`).value = isWeekday ? '18:00' : '00:00';
                document.getElementById(`${day}Open`).disabled = !isWeekday;
                document.getElementById(`${day}Close`).disabled = !isWeekday;
            });
        }
        
        // 切换时间表启用/禁用
        function toggleScheduleDay(day) {
            const enabled = document.getElementById(`${day}Enabled`).checked;
            document.getElementById(`${day}Open`).disabled = !enabled;
            document.getElementById(`${day}Close`).disabled = !enabled;
            
            if (!enabled) {
                document.getElementById(`${day}Open`).value = '00:00';
                document.getElementById(`${day}Close`).value = '00:00';
            }
        }
        
        // 保存会议室信息
        function saveRoomInfo() {
            const roomId = document.getElementById('editRoomId').value;
            const roomName = document.getElementById('roomName').value;
            const capacity = document.getElementById('roomCapacity').value;
            const location = document.getElementById('roomLocation').value;
            const facilities = document.getElementById('roomFacilities').value;
            
            // 收集时间表数据
            const schedules = [];
            const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
            const dayNames = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            
            days.forEach((day, index) => {
                const enabled = document.getElementById(`${day}Enabled`).checked;
                if (enabled) {
                    schedules.push({
                        day: index,
                        dayName: dayNames[index],
                        openTime: document.getElementById(`${day}Open`).value,
                        closeTime: document.getElementById(`${day}Close`).value
                    });
                }
            });
            
            // 实际应用中这里应该调用API
            console.log('保存会议室信息:', {
                roomId,
                roomName,
                capacity,
                location,
                facilities,
                schedules
            });
            
            alert(`会议室信息已更新！

会议室：${roomName}
容量：${capacity}人
开放时间：${schedules.length}天`);
            closeEditRoomModal();
        }
    </script>
    </style>
</head>
<body>
    <div class="layout">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <h2>🔐 管理员面板</h2>
            </div>
            <div class="menu-item active" onclick="switchView('rooms')">
                <span>🏢</span> 会议室管理
            </div>
            <div class="menu-item" onclick="switchView('bookings')">
                <span>📅</span> 所有预定
            </div>
            <div class="menu-item" onclick="switchView('statistics')">
                <span>📊</span> 统计数据
            </div>
            <div class="menu-item" onclick="switchView('settings')">
                <span>⚙️</span> 系统设置
            </div>
        </div>
        
        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 页头 -->
            <div class="header">
                <h1 id="header-title">会议室管理</h1>
                <div class="user-info">
                    <span>管理员: <strong>系统管理员</strong></span>
                    <button class="btn btn-default">退出登录</button>
                </div>
            </div>
            
            <!-- 会议室列表 -->
            <div class="card content-section" id="rooms-section">
                <div class="card-title">
                    <span>🏢 会议室列表</span>
                    <button class="btn btn-success">+ 添加新会议室</button>
                </div>
                
                <table>
                    <thead>
                        <tr>
                            <th>会议室名称</th>
                            <th>容量</th>
                            <th>位置</th>
                            <th>设施</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>会议室A</strong></td>
                            <td>10人</td>
                            <td>A栋3楼</td>
                            <td>投影仪、白板、视频会议</td>
                            <td><span class="badge badge-success">可用</span></td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-primary btn-sm" onclick="openEditRoomModal('1', '会议室A')">编辑</button>
                                    <button class="btn btn-danger btn-sm">删除</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>会议室B</strong></td>
                            <td>20人</td>
                            <td>A栋3楼</td>
                            <td>投影仪、白板、音响系统</td>
                            <td><span class="badge badge-success">可用</span></td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-primary btn-sm" onclick="openEditRoomModal('2', '会议室B')">编辑</button>
                                    <button class="btn btn-danger btn-sm">删除</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>301会议室</strong></td>
                            <td>6人</td>
                            <td>B栋3楼</td>
                            <td>白板、电视屏幕</td>
                            <td><span class="badge badge-success">可用</span></td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-primary btn-sm" onclick="openEditRoomModal('3', '301会议室')">编辑</button>
                                    <button class="btn btn-danger btn-sm">删除</button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>董事会议室</strong></td>
                            <td>15人</td>
                            <td>A栋5楼</td>
                            <td>投影仪、视频会议、高级座椅</td>
                            <td><span class="badge badge-warning">维护中</span></td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn btn-primary btn-sm" onclick="openEditRoomModal('4', '董事会议室')">编辑</button>
                                    <button class="btn btn-danger btn-sm">删除</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 所有预定 -->
            <div class="card content-section hidden" id="bookings-section">
                <div class="card-title">
                    <span>📅 所有预定记录</span>
                </div>
                <p style="color: #8c8c8c; padding: 40px; text-align: center;">此功能正在开发中...</p>
            </div>
            
            <!-- 统计数据 -->
            <div class="card content-section hidden" id="statistics-section">
                <div class="card-title">
                    <span>📊 统计数据</span>
                </div>
                <p style="color: #8c8c8c; padding: 40px; text-align: center;">此功能正在开发中...</p>
            </div>
            
            <!-- 系统设置 -->
            <div class="card content-section hidden" id="settings-section">
                <div class="card-title">
                    <span>⚙️ 系统设置</span>
                </div>
                
                <div class="settings-section">
                    <h3>🔐 管理员密码设置</h3>
                    
                    <div id="passwordSuccess" class="alert alert-success hidden"></div>
                    <div id="passwordError" class="alert alert-error hidden"></div>
                    
                    <form id="passwordForm" onsubmit="updateAdminPassword(event)">
                        <div class="form-group">
                            <label class="form-label">当前密码</label>
                            <input 
                                type="password" 
                                class="form-input" 
                                id="oldPassword"
                                placeholder="请输入当前密码"
                                required
                            >
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">新密码</label>
                            <input 
                                type="password" 
                                class="form-input" 
                                id="newPassword"
                                placeholder="请输入新密码（至少6位）"
                                minlength="6"
                                required
                            >
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">确认新密码</label>
                            <input 
                                type="password" 
                                class="form-input" 
                                id="confirmPassword"
                                placeholder="请再次输入新密码"
                                minlength="6"
                                required
                            >
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            更新密码
                        </button>
                    </form>
                    
                    <div style="margin-top: 16px; padding: 12px; background: #f0f5ff; border-radius: 4px; color: #1890ff; font-size: 13px;">
                        ℹ️ 提示：默认管理员密码为 <strong>123456789</strong>，建议首次登录后立即修改
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑会议室弹窗 -->
    <div class="modal" id="editRoomModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalRoomTitle">编辑会议室</h3>
                <button class="modal-close" onclick="closeEditRoomModal()">&times;</button>
            </div>
            
            <input type="hidden" id="editRoomId" />
            
            <!-- 标签切换 -->
            <div class="tabs">
                <button class="tab edit-tab active" data-tab="basic" onclick="switchEditTab('basic')">
                    📋 基本信息
                </button>
                <button class="tab edit-tab" data-tab="schedule" onclick="switchEditTab('schedule')">
                    ⏰ 开放时间
                </button>
            </div>
            
            <div class="modal-body">
                <!-- 基本信息标签 -->
                <div class="tab-content active" id="basic-tab">
                    <div class="form-group">
                        <label class="form-label">会议室名称</label>
                        <input type="text" class="form-input" id="roomName" placeholder="请输入会议室名称" />
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">容量（人）</label>
                        <input type="number" class="form-input" id="roomCapacity" placeholder="请输入容量" />
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">位置</label>
                        <input type="text" class="form-input" id="roomLocation" placeholder="请输入位置" />
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">设施</label>
                        <input type="text" class="form-input" id="roomFacilities" placeholder="请输入设施，用逗号分隔" />
                    </div>
                </div>
                
                <!-- 开放时间标签 -->
                <div class="tab-content" id="schedule-tab">
                    <div style="padding: 16px; background: #e6f7ff; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #1890ff;">
                        <strong>💡 提示：</strong>每个会议室可以设置独立的开放时间，勾选日期即为开放，取消勾选则为关闭。
                    </div>
                    
                    <table class="schedule-table">
                        <thead>
                            <tr>
                                <th>星期</th>
                                <th>开放时间</th>
                                <th>关闭时间</th>
                                <th>启用</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>星期一</strong></td>
                                <td><input type="time" class="time-input" id="mondayOpen" value="08:00" /></td>
                                <td><input type="time" class="time-input" id="mondayClose" value="18:00" /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="mondayEnabled" checked onchange="toggleScheduleDay('monday')" />
                                        <label for="mondayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期二</strong></td>
                                <td><input type="time" class="time-input" id="tuesdayOpen" value="08:00" /></td>
                                <td><input type="time" class="time-input" id="tuesdayClose" value="18:00" /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="tuesdayEnabled" checked onchange="toggleScheduleDay('tuesday')" />
                                        <label for="tuesdayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期三</strong></td>
                                <td><input type="time" class="time-input" id="wednesdayOpen" value="08:00" /></td>
                                <td><input type="time" class="time-input" id="wednesdayClose" value="18:00" /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="wednesdayEnabled" checked onchange="toggleScheduleDay('wednesday')" />
                                        <label for="wednesdayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期四</strong></td>
                                <td><input type="time" class="time-input" id="thursdayOpen" value="08:00" /></td>
                                <td><input type="time" class="time-input" id="thursdayClose" value="18:00" /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="thursdayEnabled" checked onchange="toggleScheduleDay('thursday')" />
                                        <label for="thursdayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期五</strong></td>
                                <td><input type="time" class="time-input" id="fridayOpen" value="08:00" /></td>
                                <td><input type="time" class="time-input" id="fridayClose" value="18:00" /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="fridayEnabled" checked onchange="toggleScheduleDay('friday')" />
                                        <label for="fridayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期六</strong></td>
                                <td><input type="time" class="time-input" id="saturdayOpen" value="00:00" disabled /></td>
                                <td><input type="time" class="time-input" id="saturdayClose" value="00:00" disabled /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="saturdayEnabled" onchange="toggleScheduleDay('saturday')" />
                                        <label for="saturdayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>星期日</strong></td>
                                <td><input type="time" class="time-input" id="sundayOpen" value="00:00" disabled /></td>
                                <td><input type="time" class="time-input" id="sundayClose" value="00:00" disabled /></td>
                                <td>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="sundayEnabled" onchange="toggleScheduleDay('sunday')" />
                                        <label for="sundayEnabled">开放</label>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeEditRoomModal()">取消</button>
                <button class="btn btn-primary" onclick="saveRoomInfo()">保存</button>
            </div>
        </div>
    </div>
</body>
</html>
